<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.过滤器</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			直接呈现：<span>{{msg}}</span> <br><br>
			呈现的同时用一下过滤器：<span>{{msg | daxie | jiequ}}</span> <br><br>
			用计算属性去呈现大写：<span>{{msg2}}</span> <br><br>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					msg:"hElLo,AtGuigU"
				},
				computed:{
					msg2(){
						return this.msg.toUpperCase()
					}
				},
				filters:{
					//daxie这个函数何时调用？ —— 有人使用这个过滤器的时候。
					//daxie这个函数中的this是谁？—— 爱谁谁，反正不是vm。
					daxie(value){
						return value.toUpperCase()
					},
					jiequ(value){
						return value.slice(0,2)
					}
				}
			})
		</script>
	</body>
</html>